<template>
	<view class="container">
		<view class="box" v-for="(item, index) in optionList" :key="index" :class="'box-'+item.index">
			<!-- {{item.index}} -->
			<u-row>
				<u-col span="10">
					<view class="title">{{item.title}}</view>
				</u-col>
				<u-col span="2" v-if="index==4">
					<view class="btn-area"><u-button type="primary" text="分析报告" @click="toAnalysis"></u-button></view>
				</u-col>
			</u-row>
			<view class="change">
				<view class="button-group" v-if="item.index == 2">
					<u-subsection :list="btnGroup" keyName="label" :current="btnValue" @change="changeRangeType">
					</u-subsection>
				</view>
				<view class="date-picker search-item" v-if="item.index !== 2&&item.index !==4&&item.index !==5">
					<text>选择时间</text>
					<view class="select-border" @click="showDatePicker(index)">
						<text v-if="!item.time">请选择时间</text>
						<text v-if="item.time" class="selectedTxt">{{ item.time }}</text>
					</view>
					<!-- <text @click="showDatePicker(index)">选择时间： {{ item.time }} \n</text> -->
				</view>
				<!-- 起止时间 -->
				<view class="change" v-if="item.index ==4||item.index ==5">
					<view class="date-picker search-item">
						<text>选择时间</text>
						<view class="select-border range">
							<uni-datetime-picker v-model="item.range" type="daterange" :border="false" ref="rangePicker"
								@change="changeDateTime(index)" />
						</view>
					</view>
				</view>

				<view class="select search-item" v-if="item.index == 4||item.index ==5">
					<text>选择单位</text>
					<view class="select-border" @click="showPicker(index)">
						<text v-if="!item.deptValue">选择部门单位</text>
						<text v-if="item.deptValue" class="selectedTxt">{{ item.deptValue }}</text>
					</view>
				</view>

				<view class="change" v-if="item.index ==4">
					<view class="date-picker search-item">
						<text>违章类型</text>
						<view class="select-border-has">
							<zxz-uni-data-select :localdata="options.violationType.list" placeholder="请选择违章类型"
								v-model="warningType" dataKey="key" dataValue="value" @change="changeViolationType">
							</zxz-uni-data-select>
						</view>
					</view>
				</view>
			</view>
			<view class="charts-box main" v-if="item.index !== 4">
				<qiun-data-charts type="pie" :opts="optsList[0]" :chartData="chartData1" v-if="item.index == 1" />
				<template v-if="item.index == 2">
					<view v-if="chartData2.categories.length == 0 ">
						<u-empty mode="data" icon="../../static/dataEmpty.png">
						</u-empty>
					</view>
					<qiun-data-charts type="line" :opts="optsList[1]" :chartData="chartData2" v-else />
				</template>
				<template v-if="item.index == 3">
					<view v-if="chartData3.categories.length == 0 ">
						<u-empty mode="data" icon="../../static/dataEmpty.png">
						</u-empty>
					</view>
					<qiun-data-charts type="column" :opts="optsList[2]" :chartData="chartData3" v-else />
				</template>
				<template v-if="item.index == 5">
					<view v-if="chartData5.series[0].data.length == 0">
						<u-empty mode="data" icon="../../static/dataEmpty.png">
						</u-empty>
					</view>
					<qiun-data-charts type="pie" :opts="optsList[3]" :chartData="chartData5" v-else />
				</template>
			</view>
			<view class="table" v-if="item.index == 4">
				<!-- <view class="today">入井安全设备穿戴数据 </view> -->
				<u-empty v-if="tableData.length==0" mode="data" icon="../../static/dataEmpty.png">
				</u-empty>
				<u-collapse v-else>
					<u-collapse-item name="Docs guide" class="collapse-item" v-for="(item,index) in tableData"
						:key="index" :title="item.dutyPerson">
						<view class="people-info-content">
							<view class="people-info-item">
								<view><text class="bold"> 工号： </text>{{item.employeeId}}</view>
							</view>
							<view class="people-info-item">
								<view><text class="bold"> 单位：</text>{{item.dutyUnit}}</view>
							</view>
							<view class="people-info-item">
								<view><text class="bold"> 风险等级： </text>{{item.level}}</view>
							</view>
							<view class="people-info-item">
								<view><text class="bold"> 作业违章类型：</text>{{item.type}}</view>
							</view>
							<view class="people-info-item">
								<view><text class="bold"> 违章金额：</text>{{item.money}}</view>
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>
		<!-- <view :id="'main' + item.index" class="main" v-if="item.index !== 4"></view> -->
		<u-datetime-picker :show="timeShow" v-model="timeValue" mode="date" @cancel="timeShow = false"
			@confirm="changeTime" ref="timeValue">
		</u-datetime-picker>
		<u-picker :show="deptShow" :columns="deptCodesOptions" @cancel="deptShow = false"
			@confirm="changeDept"></u-picker>

		<!-- <view class="change">
			<view class="date-picker search-item">
				<text>选择时间</text>
				<view class="select-border range" v-if="item.index !== 8">
					<uni-datetime-picker v-model="item.range" type="daterange" :border="false" ref="rangePicker"
						@change="getTableData(index)" />
				</view>
			</view>
		</view> -->
		<u-popup :show="isAnalysis" @close="closeAnalysis" @open="openAnalysis" mode="center" closeable>
			<view class="popupContent">
				<view class="txtTitle">分析报告</view>
				<view>
					<u-row>
						<u-col span="12">
							<view><text class="tipsTitle">部门名称：</text>{{popupDeptName}}</view>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="12">
							<view><text class="tipsTitle">统计时间：</text>{{popupTime}}</view>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="12">
							<view><text class="tipsTitle">违章作业累计次数：</text>{{violationReport.total}}</view>
						</u-col>
					</u-row>
					<view v-if="violationReport.pie.length>0" class="listScroll">
						<u-row class="report_item">
							<u-col span="4">
								<view class="tipsTitle">违章类型</view>
							</u-col>
							<u-col span="4">
								<view class="tipsTitle">违章次数</view>
							</u-col>
							<u-col span="4">
								<view class="tipsTitle">分布占比</view>
							</u-col>
						</u-row>
						<u-row v-for="(item,index) in violationReport.pie" :key="index" class="report_item">
							<u-col span="4">
								<view>{{item.type}}</view>
							</u-col>
							<u-col span="4">
								<view>{{item.number}}</view>
							</u-col>
							<u-col span="4">
								<view>{{item.percentage}}%</view>
							</u-col>
						</u-row>
					</view>
					<u-empty v-else mode="data" icon="../../static/dataEmpty.png">
					</u-empty>
					<u-row>
						<u-col span="12">
							<view>
								<text class="tipsTitle">建议加强培训：</text>
								<text v-if="violationReport.suggest">{{violationReport.suggest}}</text>
								<text v-else>无</text>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		porPie,
		violationPie,
		porLine,
		porBar,
		porTable,
		selectDeptName,
		violationType,
		violationReport
	} from "../../utils/api.js"
	const myTooltip = {
		showArrow: false,
		borderWidth: 1,
		borderRadius: 3,
		borderColor: "#EEF1F7",
		borderOpacity: 0.9,
		bgColor: "#FFFFFF",
		bgOpacity: 1,
		boxPadding: 5,
		fontSize: 14,
		lineHeight: 28,
		fontColor: "#666666",
	}
	export default {
		data() {
			return {
				chartDataList: [{}, {}, {}],
				chartData1: {},
				chartData2: {
					categories: [],
					series: [{
						name: "比率",
						data: []
					}]
				},
				chartData3: {
					categories: [],
					series: [{
							name: "安全放心人员",
							data: [],
						},
						{
							name: "安全预警人员",
							data: [],
						},
						{
							name: "安全薄弱人员",
							data: [],
						},
					]
				},
				chartData5: {
					series: [{
						data: [],
						format: 'piePeople',
					}]
				},
				optsList: [{
						color: ["#008033", "#cd9b00", "#d9001b"],
						padding: [10, 10, 10, 10],
						enableScroll: false,
						update: true,
						extra: {
							pie: {
								activeOpacity: 0.5,
								activeRadius: 10,
								offsetAngle: 0,
								labelWidth: 15,
								border: false,
								borderWidth: 3,
								borderColor: "#FFFFFF"
							},
							tooltip: myTooltip,
						}
					},
					{
						color: ["#008033", "#cd9b00", "#d9001b"],
						padding: [15, 10, 10, 15],
						enableScroll: false,
						legend: {},
						xAxis: {
							disableGrid: true,
							rotateLabel: true,
							rotateAngle: 45,
							marginTop: 6,
						},
						yAxis: {
							gridType: "dash",
							dashLength: 2
						},
						extra: {
							line: {
								type: "straight",
								width: 2,
								activeType: "hollow"
							},
							tooltip: myTooltip,
						}
					},
					{
						color: ["#008033", "#cd9b00", "#d9001b"],
						padding: [15, 10, 10, 15],
						enableScroll: false,
						dataLabel: false,
						xAxis: {
							disableGrid: true,
							rotateLabel: true,
							rotateAngle: 45,
							marginTop: 6,
						},
						extra: {
							column: {
								type: "stack",
								width: 30,
								activeBgColor: "#000000",
								activeBgOpacity: 0.08,
								labelPosition: "center"
							},
							tooltip: myTooltip,
						}
					}, {
						padding: [10, 10, 10, 10],
						enableScroll: false,
						update: true,
						extra: {
							pie: {
								activeOpacity: 0.5,
								activeRadius: 10,
								offsetAngle: 0,
								labelWidth: 15,
								border: false,
								borderWidth: 3,
								borderColor: "#FFFFFF"
							},
							tooltip: myTooltip,
						}
					},
				],
				// 表格
				tableData: [{
					number: 2,
					dutyPerson: "郑宏冉",
					money: 200,
					level: "低风险",
					dutyUnit: "准备工区",
					employeeId: "W1623",
				}, ],
				optionList: [{
						index: 1,
						time: Number(new Date()),
						title: "安全意识实时估计整体分布对比",
						type: "pie",
					},
					{
						index: 5,
						range: [],
						title: "违章作业类型分布占比",
						type: "pie",
						deptValue: "掘进工区"
					},
					{
						index: 2,
						time: Number(new Date()),
						title: "安全意识中高风险比例波动情况",
						type: "line",
					},
					{
						index: 3,
						time: Number(new Date()),
						title: "各单位职工安全意识实时估计分布情况",
						type: "column",
					},
					{
						index: 4,
						range: [],
						title: "各单位职工违章违规情况汇总",
						type: "",
						deptValue: "掘进工区"
					},
				],
				btnGroup: [{
						label: "近七天",
						value: "1",
						type: "1"
					},
					{
						label: "近一个月",
						value: "2",
						type: "2"
					},
					{
						label: "近三个月",
						value: "3",
						type: "3"
					},
					// { label: "近一年", value: "4" },
				],
				btnValue: "0",
				timeShow: false,
				timeValue: Number(new Date()),
				curTimeIndex: null,
				deptCodesOptions: [],
				deptShow: false,
				options: {
					violationType: {
						list: [],
						checked: false,
					},
				},
				warningType: '',
				curDeptIndex: null,
				isAnalysis: false,
				violationReport: {
					total: '',
					pie: [],
					suggest: ''
				},
				popupDeptName: '',
				popupTime: '',
			};
		},
		onLoad(option) {
			this.setOptionTime();
			this.getOptions();
			this.getGraph1();
			this.getGraph2("1");
			this.getGraph3();
			this.getTableData();
			this.getGraph5();
		},
		methods: {
			// 设置时间
			setOptionTime() {
				const aweek = new Date();
				aweek.setTime(aweek.getTime() - 3600 * 1000 * 24 * 7);
				const yesterday = new Date();
				yesterday.setTime(yesterday.getTime() - 3600 * 1000 * 24);
				this.optionList.forEach((e) => {
					if (e.index == 2) e.time = aweek;
					// if (e.index == 4) e.time = yesterday;
					// if (e.index == 5) e.time = yesterday;
					if (e.index == 5 || e.index == 4) e.range = this.defaultRange();
					e.time = this.formatTime(e.time);

				});
			},
			// 默认时间范围
			defaultRange() {
				// 最近一个月
				const end = new Date();
				const start = new Date();
				start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
				const time = [this.formatTime(start), this.formatTime(end)];
				return time;
			},
			// 时间格式重构
			formatTime(shijianchuo) {
				function add0(m) {
					return m < 10 ? "0" + m : m;
				}
				// console.log(shijianchuo); // Wed Aug 21 2024 10:23:01 GMT+0800 (中国标准时间)
				// console.log(new Date(shijianchuo)); // Wed Aug 21 2024 10:23:01 GMT+0800 (中国标准时间)
				var time = new Date(shijianchuo);
				var y = time.getFullYear();
				var m = time.getMonth() + 1;
				var d = time.getDate();
				return y + "-" + add0(m) + "-" + add0(d);
			},
			// 获取下拉列表
			getOptions() {
				// 部门 /examCrowd/selectDeptName
				selectDeptName()
					.then(s => {
						// console.log("deptCodes", s.data);
						this.deptCodesOptions = [s.data];
						// console.log(this.deptCodesOptions);
					})
					.catch((err) => {
						console.log(err);
					});
				violationType().then(s => {
					if (s.code === 20000) {
						this.options.violationType.list = s.data.map(item => ({
							key: item,
							value: item
						}));
					} else {
						uni.showToast({
							title: s.message,
							icon: "none"
						})
					}
				})
			},
			getGraph1() {
				let params = {
					time: this.optionList.find((item) => item.index == 1).time,
				};
				porPie(params).then(s => {
					if (s.code === 20000) {
						let data = s.data;
						let seriesData = [];
						const str = JSON.stringify(data);
						if (str !== "null" && str !== "{}") {
							seriesData = [{
								"name": "安全放心人员",
								"value": data.low,
							}, {
								"name": "安全预警人员",
								"value": data.medium,
							}, {
								"name": "安全薄弱人员",
								"value": data.high,
							}]

						} else {
							seriesData = [{
								"name": "安全放心人员",
								"value": 0
							}, {
								"name": "安全预警人员",
								"value": 0
							}, {
								"name": "安全薄弱人员",
								"value": 0
							}]
						}
						let res = {
							series: [{
								data: seriesData,
								format: 'piePeople',
							}]
						};
						// console.log("res",res);
						// console.log(this.chartDataList);
						// this.chartDataList[0] = JSON.parse(JSON.stringify(res)); //渲染不对
						this.chartData1 = JSON.parse(JSON.stringify(res));
					} else {
						uni.showToast({
							title: s.message,
							icon: 'none'
						})
					}
				})
			},
			getGraph2(type) {
				let time = this.optionList.find((item) => item.index == 2).time;
				let params = {
					startTime: this.formatTime(time),
					type: type,
				};
				porLine(params)
					.then(s => {
						const data = s.data;
						const xData = this.getAttrs(data, "date");
						const yData = this.getAttrs(data, "percent");
						// 语句加上{}-得有return, 没有{}-可以没有return
						let seriesData = yData.map(e => parseFloat(e));
						let res = {
							categories: xData,
							series: [{
								name: "比率",
								data: seriesData
							}]
						};
						//console.log(res);
						this.chartData2 = JSON.parse(JSON.stringify(res));
					})
					.catch((err) => {
						console.log(err);
					});
			},
			getGraph3() {
				let params = {
					time: this.optionList.find((item) => item.index == 3).time,
				};
				porBar(params)
					.then(s => {
						const data = s.data;
						// console.log("3", data);
						const xData = this.getAttrs(data, "deptName");
						let yData = {
							high: [],
							medium: [],
							low: [],
						};
						for (let key in yData) {
							yData[key] = this.getAttrs(data, key);
						}
						// console.log(yData);
						let res = {
							categories: xData,
							series: [{
									name: "安全放心人员",
									data: yData.low,
								},
								{
									name: "安全预警人员",
									data: yData.medium,
								},
								{
									name: "安全薄弱人员",
									data: yData.high,
								},
							]
						};
						//console.log(res);
						this.chartData3 = JSON.parse(JSON.stringify(res));
					})
					.catch((err) => {
						console.log(err);
					});
			},
			getTableData() {
				let params = {
					type: this.warningType,
					deptName: this.optionList.find((item) => item.index == 4).deptValue,
					startDate: this.optionList.find((item) => item.index == 4).range[0],
					endDate: this.optionList.find((item) => item.index == 4).range[1]
				};
				porTable(params)
					.then(s => {
						// console.log(res.data.data);
						this.tableData = s.data;
						// console.log("this.tableData",this.tableData);
					})
					.catch((err) => {
						console.log(err);
					});
			},
			getGraph5() {
				let params = {
					startDate: this.optionList.find((item) => item.index == 5).range[0],
					endDate: this.optionList.find((item) => item.index == 5).range[1],
					deptName: this.optionList.find((item) => item.index == 5).deptValue,
				};
				violationPie(params).then(s => {
					if (s.code === 20000) {
						let data = s.data;
						// console.log("getGraph5",data);
						let seriesData = [];
						data.forEach((val) => {
							seriesData.push({
								name: val.type,
								value: val.number,
							});
						});
						let res = {
							series: [{
								data: seriesData,
								format: 'piePeople',
							}]
						};
						// console.log("res",res);
						// console.log(this.chartDataList);
						// this.chartDataList[0] = JSON.parse(JSON.stringify(res)); //渲染不对
						this.chartData5 = JSON.parse(JSON.stringify(res));
					} else {
						uni.showToast({
							title: s.message,
							icon: 'none'
						})
					}
				})
			},
			getAttrs(array, attr) {
				var arr = array.map((item) => {
					return item[attr];
				});
				return arr;
			},
			// 显示时间选择器
			showDatePicker(index) {
				// 设置选择器显示的时间
				const time = this.optionList[index].time;
				this.timeValue = new Date(time).getTime();
				// 重新赋值
				this.$refs.timeValue.innerValue = this.timeValue;
				this.curTimeIndex = index;
				this.timeShow = true;
			},
			// 改变时间
			changeTime(e) {
				this.timeShow = false;
				const timeFormat = uni.$u.timeFormat
				// console.log(timeFormat(e.value, 'yyyy-mm-dd'));
				const time = timeFormat(e.value, 'yyyy-mm-dd');
				const cur = this.curTimeIndex; //当前选择框的index
				this.optionList[cur].time = time; //选择的时间赋值
				const index = this.optionList[cur].index; //optionList里的index
				if (index == 1) this.getGraph1();
				if (index == 3) this.getGraph3();
				if (index == 4) this.getTableData();
				if (index == 5) this.getGraph5();
			},
			// 改变区间类型（七天、一个月...）
			changeRangeType(index) {
				// console.log(index);
				this.btnValue = index;
				let item = this.btnGroup[index]
				let newTime = "";
				if (item.value == "1") newTime = new Date() - 3600 * 1000 * 24 * 7;
				if (item.value == "2") newTime = new Date() - 3600 * 1000 * 24 * 30;
				if (item.value == "3") newTime = new Date() - 3600 * 1000 * 24 * 30 * 6;
				// if (item.value == "4") newTime = new Date() - 3600 * 1000 * 24 * 365;
				this.optionList[1].time = newTime;
				this.getGraph2(item.type);
			},
			// 显示工区的选择器
			showPicker(index) {
				this.deptShow = true;
				this.curDeptIndex = index;
				console.log("index", index);
			},
			// 改变工区
			changeDept(e) {
				this.deptShow = false;
				this.optionList[this.curDeptIndex].deptValue = e.value[0];
				const index = this.optionList[this.curDeptIndex].index;
				if (index == 4) this.getTableData();
				if (index == 5) this.getGraph5();
			},
			changeViolationType() {
				if (this.warningType) {
					//查询操作
					this.getGraph5()

				}
			},
			changeDateTime(index) {
				if (index == 5) this.getGraph5()
				if (index == 4) this.getTableData()
			},
			closeAnalysis() {
				this.isAnalysis = false
			},
			openAnalysis() {

			},
			toAnalysis() {
				this.isAnalysis = true
				this.popupDeptName = this.optionList.find((item) => item.index == 4).deptValue
				this.popupTime = this.optionList.find((item) => item.index == 4).range[0] + '至' + this.optionList.find((
					item) => item.index == 4).range[1]
				violationReport({
					deptName: this.optionList.find((item) => item.index == 4).deptValue, //'准备工区',
					startDate: this.optionList.find((item) => item.index == 4).range[0], //'2024-09-08',
					endDate: this.optionList.find((item) => item.index == 4).range[1]
				}).then(s => {
					if (s.code === 20000) {
						this.violationReport.total = s.data.total
						if (s.data.suggest) this.violationReport.suggest = s.data.suggest.join(',')
						this.violationReport.pie = s.data.pie
					} else {
						uni.showToast({
							title: s.message,
							icon: 'none'
						})
					}
				})

			},
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		position: relative;
		// background: #F2F2F2;
		height: calc(100vh - 44px - 50px);

		.box {
			// position: relative;
			width: 100%;
			height: 50%;
			padding: 10px 0;
			box-sizing: border-box;
			border-bottom: 1px dashed #999;

			.title {
				font-size: 20px;
				color: #1f2f3d;
				margin-left: 20px;
				line-height: 40px;
				font-weight: 700;
				white-space: nowrap;
				position: relative;
			}

			.title:before {
				content: "";
				display: block;
				top: 1px;
				border-radius: 10px;
				background-color: #0ea8e4;
				width: 5px;
				height: 20px;
				position: absolute;
				top: 10px;
				left: -12px;
			}

			.change {
				// position: absolute;
				// top: 8%;
				// left: 50%;
				// z-index: 10;
				// transform: translate(-50%, 0);
				// display: flex;
				// height: 10%;
				width: 100%;
				text-align: center;

				.button-group {
					width: 100%;
				}

				.date-picker {
					// width: 100%;
					// display: block;
					// text-align: center;
				}

				.select {
					// display: block;
					// margin-left: 14px;
					// text-align: center;
					margin: 10rpx 0;
				}

				.search-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					position: relative;
					// margin-top: 10rpx;
					font-size: 30rpx;
					box-sizing: border-box;
					padding: 10rpx 20rpx;

					.select-border {
						width: 80%;
						height: 35px;
						line-height: 35px;
						border: 1px solid #dadbde;
						border-radius: 50rpx;
						color: #B1B1B1;
						box-sizing: border-box;
						padding: 0rpx 25rpx;
						font-size: 16px;
						background-color: #FEFEFE;
						// z-index: 0;

						.selectedTxt {
							color: rgb(48, 49, 51);
						}
					}

					.range,
					.multiple {
						height: auto;
						// height: 38px;
					}

					.multiple {
						/deep/.uni-select {
							border: none;

							.uni-select__input-placeholder {
								font-size: 14px;
							}
						}
					}

					.select-border-has {
						width: 80%;
						height: 38px;
						line-height: 38px;
						border: 1px solid #dadbde;
						border-radius: 50rpx;
						// color: #B1B1B1;
						box-sizing: border-box;
						padding: 0rpx 25rpx;
						font-size: 16px;
						// z-index: 9;
						position: relative;
						display: flex;
						align-items: center;

						.selectedTxt {
							color: rgb(48, 49, 51);
						}
					}
				}
			}

			.main {
				width: 100%;
				height: 84%;
				// box-60% main-88%
			}

			.table {
				.collapse-item {
					background: #ffffff;
				}

				.people-info-content {
					width: 100%;

					.people-info-item {
						display: flex;
						// justify-content: space-between;
						margin-bottom: 10rpx;
						flex-wrap: wrap;
						line-height: 1.8;
					}
				}

			}
		}

		.box-1 {
			height: 50%;

			.main {
				height: 84%;
			}
		}

		.box-5 {
			height: 72%;

			.main {
				height: 75%;
			}
		}

		.box-4 {
			height: auto;
		}
	}

	/deep/.uni-select {
		border: none;

		.uni-select__input-placeholder {
			font-size: 14px;
		}
	}

	.btn-area {
		margin-right: 20rpx;
		position: relative;
		box-sizing: border-box;
	}

	.popupContent {
		margin-top: 40rpx;
		position: relative;
		box-sizing: border-box;
		padding: 0rpx 40rpx 10rpx;
		width: 660rpx;
		max-height: 1300rpx;
		overflow-y: auto;
	}

	.txtTitle {
		box-sizing: border-box;
		padding: 10rpx 0px;
		text-align: center;
		line-height: 2;
		font-weight: 800;
		font-size: 40rpx;
		margin-top: 20rpx;
	}

	.tipsTitle {
		font-weight: 800;
		line-height: 2;
	}

	.report_item {
		border-bottom: 1px solid #D4D1D1;
		padding: 10rpx;
		width: 100%;
		position: relative;
		box-sizing: border-box;
	}

	.report_item :last-child {
		border-bottom: none;
	}

	.listScroll {
		width: 100%;
		position: relative;
		box-sizing: border-box;
		max-height: 590rpx;
		overflow-y: auto;
	}
</style>